<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回合管理测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .test-container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        .battle-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }
        .player-stats {
            display: flex;
            gap: 20px;
        }
        .stat {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .hand-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 20px 0;
            min-height: 120px;
        }
        .card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 120px;
            text-align: center;
            position: relative;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
        }
        .card.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #666;
        }
        .card.disabled:hover {
            transform: none;
            box-shadow: none;
        }
        .card-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .card-cost {
            color: #ffd700;
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        .card-description {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        .actions {
            display: flex;
            gap: 15px;
            margin: 20px 0;
        }
        button {
            padding: 12px 25px;
            font-size: 1rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-primary {
            background: #4CAF50;
            color: white;
        }
        .btn-secondary {
            background: #f44336;
            color: white;
        }
        .btn-energy {
            background: #ff9800;
            color: white;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .log {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
            max-height: 200px;
            overflow-y: auto;
        }
        .log-item {
            margin-bottom: 5px;
            padding: 5px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        .energy-warning {
            color: #ff6b6b;
            font-weight: bold;
        }
        .energy-gain {
            color: #4CAF50;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>回合管理测试</h1>
        
        <div class="battle-info">
            <div class="player-stats">
                <div class="stat">
                    <span>❤️</span>
                    <span id="player-health">100</span>
                </div>
                <div class="stat">
                    <span>⚡</span>
                    <span id="player-energy">3</span>
                </div>
                <div class="stat">
                    <span>🛡️</span>
                    <span id="player-block">0</span>
                </div>
            </div>
            <div>
                <span>回合: <span id="current-turn">1</span></span>
            </div>
        </div>
        
        <div class="hand-container" id="hand-container">
            <!-- 手牌将在这里显示 -->
        </div>
        
        <div class="actions">
            <button class="btn-primary" onclick="game.endTurn()">结束回合</button>
            <button class="btn-energy" onclick="game.usePotion()">使用药水</button>
            <button class="btn-secondary" onclick="game.resetTest()">重置测试</button>
        </div>
        
        <div class="log">
            <h3>战斗日志</h3>
            <div id="battle-log"></div>
        </div>
    </div>

    <script>
        // 回合管理测试
        class TurnManagementTest {
            constructor() {
                this.player = {
                    health: 100,
                    maxHealth: 100,
                    energy: 3,
                    maxEnergy: 3,
                    block: 0
                };
                this.currentTurn = 1;
                this.battleLog = [];
                this.playerHand = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '能量爆发', cost: 1, type: 'energy', energy: 2, description: '获得2点能量' },
                    { name: '专注', cost: 1, type: 'energy', energy: 1, description: '获得1点能量，抽1张牌' },
                    { name: '活力', cost: 0, type: 'energy', energy: 3, description: '获得3点能量，失去2点生命' }
                ];
                this.playerPotions = [
                    { name: '糖水', description: '获得2点能量' },
                    { name: '可乐', description: '获得1点能量，抽1张牌' }
                ];
                
                this.updateDisplay();
            }
            
            useCard(card) {
                if (this.player.energy < card.cost) {
                    this.addLog(`<span class="energy-warning">能量不足！需要${card.cost}点能量，当前只有${this.player.energy}点</span>`);
                    return;
                }

                this.player.energy -= card.cost;
                this.addLog(`使用卡牌: ${card.name} (消耗${card.cost}能量)`);

                if (card.type === 'attack') {
                    this.addLog(`造成${card.damage}点伤害`);
                } else if (card.type === 'defend') {
                    this.player.block += card.block;
                    this.addLog(`获得${card.block}点护甲`);
                } else if (card.type === 'energy') {
                    this.player.energy += card.energy || 0;
                    this.addLog(`<span class="energy-gain">获得${card.energy || 0}点能量</span>`);
                }

                // 从手牌中移除
                const cardIndex = this.playerHand.indexOf(card);
                if (cardIndex > -1) {
                    this.playerHand.splice(cardIndex, 1);
                }

                this.updateDisplay();
            }
            
            usePotion() {
                if (this.playerPotions.length === 0) {
                    this.addLog('没有可用的药水！');
                    return;
                }

                const potion = this.playerPotions[0];
                this.playerPotions.shift();
                
                switch (potion.name) {
                    case '糖水':
                        this.player.energy += 2;
                        this.addLog(`<span class="energy-gain">使用糖水: 获得2点能量</span>`);
                        break;
                    case '可乐':
                        this.player.energy += 1;
                        this.addLog(`<span class="energy-gain">使用可乐: 获得1点能量，抽1张牌</span>`);
                        break;
                }
                
                this.updateDisplay();
            }
            
            endTurn() {
                this.addLog(`=== 第 ${this.currentTurn} 回合结束 ===`);
                
                // 重置玩家状态
                this.player.energy = this.player.maxEnergy;
                this.player.block = 0;
                
                // 抽牌
                this.drawHand();
                
                this.currentTurn++;
                this.addLog(`=== 第 ${this.currentTurn} 回合开始 ===`);
                this.updateDisplay();
            }
            
            drawHand() {
                // 补充手牌到5张
                while (this.playerHand.length < 5) {
                    const newCard = {
                        name: '攻击',
                        cost: 1,
                        type: 'attack',
                        damage: 6,
                        description: '造成6点伤害'
                    };
                    this.playerHand.push(newCard);
                }
            }
            
            updateDisplay() {
                // 更新玩家状态
                document.getElementById('player-health').textContent = this.player.health;
                document.getElementById('player-energy').textContent = this.player.energy;
                document.getElementById('player-block').textContent = this.player.block;
                document.getElementById('current-turn').textContent = this.currentTurn;
                
                // 更新手牌
                const handContainer = document.getElementById('hand-container');
                handContainer.innerHTML = '';
                
                this.playerHand.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    
                    // 检查是否可以出牌
                    if (this.player.energy < card.cost) {
                        cardElement.classList.add('disabled');
                    }
                    
                    cardElement.innerHTML = `
                        <div class="card-name">${card.name}</div>
                        <div class="card-cost">消耗: ${card.cost}</div>
                        <div class="card-description">${card.description}</div>
                    `;
                    
                    if (!cardElement.classList.contains('disabled')) {
                        cardElement.onclick = () => this.useCard(card);
                    }
                    
                    handContainer.appendChild(cardElement);
                });
            }
            
            addLog(message) {
                this.battleLog.push(message);
                this.updateLogDisplay();
            }
            
            updateLogDisplay() {
                const logContainer = document.getElementById('battle-log');
                logContainer.innerHTML = this.battleLog.map(log => `<div class="log-item">${log}</div>`).join('');
                logContainer.scrollTop = logContainer.scrollHeight;
            }
            
            resetTest() {
                this.player = {
                    health: 100,
                    maxHealth: 100,
                    energy: 3,
                    maxEnergy: 3,
                    block: 0
                };
                this.currentTurn = 1;
                this.battleLog = [];
                this.playerHand = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '能量爆发', cost: 1, type: 'energy', energy: 2, description: '获得2点能量' },
                    { name: '专注', cost: 1, type: 'energy', energy: 1, description: '获得1点能量，抽1张牌' },
                    { name: '活力', cost: 0, type: 'energy', energy: 3, description: '获得3点能量，失去2点生命' }
                ];
                this.playerPotions = [
                    { name: '糖水', description: '获得2点能量' },
                    { name: '可乐', description: '获得1点能量，抽1张牌' }
                ];
                
                this.updateDisplay();
            }
        }
        
        // 初始化测试
        const game = new TurnManagementTest();
    </script>
</body>
</html>
